<template>
  <div>
    <div class="allDiscuss" v-for="(item, index) in props.foo2" :key="index">
      <div>
        <el-avatar :size="50" :src="item.userHead" />
      </div>
      <div class="info" style="margin: 10px">
        <div>
          <text class="name" style="float: left; justify-self: center">{{
            item.userName
          }}</text>
        </div>
        <br />
        <div style="display: flex">
          <text class="Content" style="text-align: left">{{
            item.content
          }}</text>
        </div>
        <div style="float: left">
          <text
            @click="detailComment(index)"
            style="color: #006699; font-size: small"
            >更多回复</text
          >
        </div>
        <br />
        <div>
          <text class="time" style="float: left">{{ item.time }}</text>
          <div style="margin-left: 400px">
            <div style="margin-left: 100px">
              <discussIcon
                :index="item.rootCommentId"
                :if_Father="1"
              ></discussIcon>
            </div>
            <div style="margin-top: -23px; margin-left: 100px">
              <div style="margin-left: 150px; margin-top: -20px">
                <pinWeiGui
                  :badUserId="item.userId"
                  :pinId="item.rootCommentId"
                  :badUserName="item.userName"
                  :Content="item.content"
                ></pinWeiGui>
              </div>
            </div>
          </div>
        </div>
        <div style="float: left; margin-top: 20px">
          <sonComment
            :rootIndex="props.foo2[index].sonCommentList"
            v-if="Isseen[index]"
          ></sonComment>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
// import { ref, reactive } from 'vue'
import discussIcon from '../information/discussIcon.vue'
import pinWeiGui from '../likeIcon/pinWeiGui.vue'
import { defineProps, ref } from 'vue'
import sonComment from '../information/sonComment.vue'
const props = defineProps(['foo2', 'id1'])
const Isseen = ref([false])
console.log(JSON.stringify(props.foo2))
console.log('hhhhhhh' + props.id1)

function detailComment(index) {
  Isseen.value[index] = !Isseen.value[index]
}
</script>
<style lang="scss">
.allDiscuss {
  display: flex;
  float: left;
  width: 800px;
  margin-top: 20px;
}
.info {
  .name {
    color: darkblue;
    font-size: 10x;
    font-family: '黑体';
  }
  .Content {
    color: #000000;
    font-size: 15px;
    text-align: left;
  }
}
.time {
  font-size: 4px;
  color: darkgrey;
}
a {
  text-decoration: none;
}
</style>
